<template>
    <div>
        <el-card>
            <template #header>
                <h3>系统公告</h3>
            </template>
            <el-form label-width="120px" :rules="rules" ref="rowForm">
                <el-form-item label="公告内容" prop="announcement">
                    <p v-if="!isUpdate" v-text="announcement"></p>
                    <el-input v-else v-model="announcement" :autosize="{ minRows: 5, maxRows: 23 }" type="textarea" />
                </el-form-item>
                <el-form-item v-if="!isUpdate">
                    <el-button type="primary" @click="isUpdate = !isUpdate">修改</el-button>
                </el-form-item>
                <el-form-item v-else>
                    <el-button type="primary" @click="updateAnnouncement(this.announcement)">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { announcementUpdateAPI } from '@/api/system';
import { announcementFindAPI } from '@/api/system';
import { ElMessage } from 'element-plus';
export default {
    data() {
        return {
            announcement: '',
            isUpdate: false
        }
    },
    methods: {
        loadAnnouncementList() {
            announcementFindAPI().then((resp) => {
                if (resp.data.code == 2000) {
                    this.announcement = resp.data.data;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        updateAnnouncement() {
            let params = {
                announcement: this.announcement
            }
            announcementUpdateAPI(params).then((resp) => {
                if (resp.data.code == 2000) {
                    ElMessage.success(resp.data.message);
                    this.isUpdate = !this.isUpdate;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        }
    },
    created() {
        this.loadAnnouncementList();
    },
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
}

.el-card {
    width: 600px;
}
</style>